<html>
  <head>
  <title></title>
  <style>
    
    vlist 
    { 
      display:block; 
      height:*; width:300px; 
      border:1px solid black; 
      overflow: scroll-indicator;
    }

    vlist > li {
      display:block; 
      padding:0 6dip;
      line-height:31dip;
      background: linear-gradient(top, #fff, #ddd);
      behavior:form; /* each repeated child is treated as a form so it can accept object values */ 
    } 
    
    vlist > li.highlighted {
      background: linear-gradient(top, #fff, #da9);
    }

    vlist > li:hover {
      background: linear-gradient(top, #fff, #bcd);
    }

    vlist > li:current {
      background:gold;
    }    
    
      
  </style>
  <script type="text/tiscript">
  
  include "../vlist.tis";
  
  function self.ready() {
  
    var records = new Array(10000);
    var n = 0;
    var p = 0;
    
    function setupRecordView(recordNo,record,viewEl) {
      viewEl.attributes.toggleClass( "highlighted", record.highlighted || false );
    }
    
    function provideItemData(recordNo) {
      return { index: recordNo, caption:"Item" };  
    }
     
    var vlist = VirtualList {
      container     : $(vlist),
      bufferSize    : 50, // records in sliding window
      setupItemView : setupRecordView,
      getItemData   : provideItemData
    };
    
    // feed it by these records
    vlist.value = records;
    
    $(#add) << event click() {
      for(var i in 10)
        records.push { index: ++n, caption:"New Item" };
    }
    $(#insert) << event click() {
      for(var i in 10)
        records.unshift{ index: --p, caption:"New Item" };
    }
    $(#delf) << event click() {
      for(var i in 10)
        records.shift();
    }
    $(#dell) << event click() {
      records.length -= 10; // that's the same as:      
      //for(var i in 10)
      //  records.pop();
    }

    $(#update) << event click() {
      for(var i in 10)
        records[i] = { index: ++n, caption:"Updated Item" };
    }
    
    $(#update-last) << event click() {
      for(var i in 10)
        records[records.length - 10 + i] = { index: ++n, caption:"Updated Item" };
    }

    $(#updateIndex) << event click() {
      for(var record in records)
        if(record)
          record.index += 1;
    }

    $(#removeHighlighted) << event click() {
      for(var record in records)
        if(record)
          record.highlighted = false;
    }
    
    $(#updateHighlighted) << event click() {
      for(var (n,record) in records)
        if(record)
          record.highlighted = (n & 1) != 0;
    }
    
  }
  
  </script>
  </head>
<body>

  <h2><code>provideItemData</code> demo</h2>
  
  <p>Records array is created with no records (as an array with 10,000 undefined elements). 
     <code>provideItemData</code> callback gets called on demand - when record is needed.</p>

  <button #add>Add 10</button>
  <button #insert>Prepend 10</button> 
  <button #delf>Delete first 10</button> 
  <button #dell>Delete last 10</button> 
  <button #update>Update first 10</button> 
  <button #update-last>Update last 10</button> 
  <button #updateIndex>Increment index</button> 
  <p>test custom setupItemView() function</p>
  <button #updateHighlighted>Highlight (set 'record.highlighted = true') to odd items</button> 
  <button #removeHighlighted>Remove highlightion</button> 

  <vlist>
    <li><span(index)/> <span(caption)>???</span></li>
  </vlist>
 
  
</body>
</html>
